/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* model */
import { RoleViewUserTab, RoleViewFeatureAuthTab } from '@src/modules/account/roleService/model'
/* scss */
import '@src/modules/account/roleService/component/RoleViewTabs/index.scss'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent } from 'vue'

export type RoleViewTabsForEditProps = {

}

export interface RoleViewTabsForEditSetupState {
  activeTab: ComputedRef<string>
}

export enum RoleViewTabsForEditEventEnum {
  Input = 'input',
  UpdateActive = 'update:active'
}

export type RoleViewTabsForEditEmitsOptions = {
  input: () => void;
}

export type RoleViewTabsForEditInstance = ComponentInstance & RoleViewTabsForEditSetupState
export type RoleViewTabsForEditVM = RoleViewTabsForEditSetupState & RoleViewTabsForEditProps & ComponentInstance

export type SettingCompanyPaymentTab = {
  show: boolean;
  title: string;
  name: string;
}

export default defineComponent({
  name: ComponentNameEnum.RoleViewTabsForEdit,
  emits: [RoleViewTabsForEditEventEnum.Input, RoleViewTabsForEditEventEnum.UpdateActive],
  props: {
    
  },
  setup(props: RoleViewTabsForEditProps, { slots, emit }) {
    
    const activeTab: ComputedRef<string> = computed(() => {
      return ''
    })
    
    return {
      activeTab
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.RoleViewTabsForEdit}>
        <el-tabs activeName={this.activeTab}>
          
          <el-tab-pane key={RoleViewUserTab.key} label={RoleViewUserTab.name} name={RoleViewUserTab.name}>
            
          </el-tab-pane>
            
          <el-tab-pane key={RoleViewFeatureAuthTab.key} label={RoleViewFeatureAuthTab.name} name={RoleViewFeatureAuthTab.name}>
            
          </el-tab-pane>
            
        </el-tabs>
      </div>
    ) as any
  }
}) as any
